<template>
    <div style="padding: 30px">
        <div class="f-20 mtb-10">iconfont图标-vue3使用示例</div>
        <div class="column mtb-10" style="gap: 10px">
            <div>
                解决后台管理选择图标和使用图标的同步问题，采用选择时打包，使用时单个获取的方式对图标进行统一管理，
                <span style="color: red">解决项目打包体积问题，图标0侵入</span>
                ，可做cdn
            </div>
        </div>

        <div class="row g-10">
            <div>颜色配置：</div>
            <colorChoose v-model:colors="conf.color" :length="10" />
        </div>

        <div class="row g-10 mtb-10 items-center">
            <div>一般图标：</div>
            <template v-for="item in conf.iconList">
                <VIcon :lib="item.lib" :name="item.name" :size="conf.size" :color="conf.color" />
            </template>
            <VIcon lib="chroma" name="abacus" size="40" :nofill="true" />
            <VIcon lib="chroma" name="baby cup" size="40" :color="conf.color" />
            <VIcon lib="chroma" name="baby cup" size="40" :nofill="true" />
        </div>

        <div class="row g-10 mtb-10 items-center">
            <div>SVG图标：</div>
            <VSIcon name="vite" size="40" />
            <VSIcon name="vite" size="40" :color="['#ffdf45', '#ffac04', '#42cfff', '#42cfff', '#bd34fe']" />
            <VSIcon name="vite" size="40" :color="['#66a1fe', '#ffac04', '#bd34fe', '#bd34fe', '#fd7357']" />
            <VSIcon name="vite" size="40" :color="['#bd34fe', '#ffac04', '#66a1fe', '#66a1fe', '#4c91c7']" />
            <VSIcon name="vite" size="40" :color="['#fd7357', '#ffac04', '#4c91c7', '#4c91c7', '#66a1fe']" />
            <div style="width: 80px; height: 80px">
                <cani
                    style="cursor: pointer"
                    name="svgtest"
                    :styles="{ width: '100rpx', height: '100rpx' }"
                    :data="{
                        color: ['#6d4c41', '#ffca28', '#82b1ff', '#0277bd', '#448aff', '#18ffff', '#8d6e63'],
                        size: 80
                    }"
                    v-slot="data"
                >
                    <VSIcon name="setting" :color="data.color" :size="data.size" @click="conf.svg.getAni" />
                </cani>
            </div>
            <div
                @click="conf.svg.getColor"
                style="width: 80px; height: 80px; cursor: pointer"
                class="flex items-center"
            >
                《=点我试试
            </div>
        </div>

        <div class="row g-10 mtb-10">
            <cbutton @click="conf.dialog.show = true">添加图标</cbutton>
            <addDialog v-model:show="conf.dialog.show" @close="conf.chooseIcon" />
            <cbutton @click="conf.dialog.showFind = true">查找图标</cbutton>
            <findDialog v-model:show="conf.dialog.showFind" />
        </div>

        <div class="mtb-10" style="font-size: 12px">
            此示例均使用
            <span style="color: red">开源图标库</span>
            进行展示，如果您的图标库出现在示例中，存在
            <span style="color: red">不可商用</span>
            ，
            <span style="color: red">付费使用</span>
            的情况，请
            <span style="color: red">立即联系作者进行删除</span>
        </div>
        <div
            class="column"
            style="gap: 10px; font-size: 16px; padding: 10px; border: 1px solid #eee; width: max-content"
        >
            <div>有关链接：</div>
            <div class="row" style="gap: 40px">
                <a href="https://www.iconfont.cn" target="_blank">iconfont官网</a>
                <a href="https://gitee.com/veigarchen/iconfont-static-vue3" target="_blank">本站源码开源地址</a>
                <a
                    href="https://www.iconfont.cn/collections/index?spm=a313x.home_index.i3.3.5a793a814dAgVq&sortType=icon"
                    target="_blank"
                >
                    图标均从iconfot图标排行榜中下载
                </a>
                <a href="https://gitee.com/veigarchen/iconfont-download" target="_blank">iconfont图标一键下载插件</a>
            </div>
            <div class="row" style="gap: 40px">
                <a href="https://gitee.com/veigarchen" target="_blank">作者gitee</a>
            </div>
            <div class="row" style="gap: 40px">
                <a href="https://juejin.cn/user/307518987311576/posts" target="_blank">作者倔金</a>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import addDialog from './addDialog.vue'
import findDialog from './findDialog.vue'
import colorChoose from './colorChoose.vue'
import CTween from '~/store/CTween'

const getRandomHexColor = () => {
    return `#${Math.floor(Math.random() * 16777215)
        .toString(16)
        .padStart(6, '0')}`
}
const bounce = ({ start, end, percent }: any) => {
    const totalDistance = end - start
    const bounceEffect = Math.abs(Math.sin(2 * Math.PI * percent) * (1 - percent))
    return start + totalDistance * bounceEffect
}
const conf = reactive({
    size: '40',
    color: [],
    dialog: {
        show: false,
        showFind: false
    },
    iconList: [
        {
            lib: 'ant',
            name: 'up'
        },
        {
            lib: 'ant',
            name: 'delete'
        }
    ],

    chooseIcon: (_item: any) => {
        const item = JSONUtil.cp(_item)
        conf.iconList.push({
            lib: item.lib,
            name: item.item.name
        })
    },
    svg: {
        isRun: false,
        ani: true,
        getColor: () => {
            conf.svg.toColor([
                getRandomHexColor(),
                getRandomHexColor(),
                getRandomHexColor(),
                getRandomHexColor(),
                getRandomHexColor(),
                getRandomHexColor(),
                getRandomHexColor()
            ])
        },
        toColor: (color: string[]) => {
            if (!conf.svg.ani) {
                CTween.set('svgtest', {
                    color: color
                })
                return
            }

            if (conf.svg.isRun) return
            conf.svg.isRun = true

            CTween.to('svgtest', {
                duration: 2000,
                color: color,
                size: 150,
                x: 100,
                rotate: 90,
                ease: {
                    default: bounce
                },
                final(target: any, status: any) {
                    conf.svg.isRun = false
                }
            })
        },
        getAni: () => {
            conf.svg.toColor(['#6d4c41', '#ffca28', '#82b1ff', '#0277bd', '#448aff', '#18ffff', '#8d6e63'])
        }
    }
})

CTween.run()
</script>
<style lang="less" scoped>
.f-20 {
    font-size: 20px;
}
.mtb-10 {
    margin: 10px 0px;
}
.g-10 {
    gap: 10px;
}
</style>
